﻿<UserControl 
        x:Class="DiscoveryLogic.UI.Layouts.Controls.HelocBarChartCylinders"
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Height="84" Width="195"
        >

    <Canvas x:Name="Root">

        <!-- Shadow of 2nd cylinder from left -->
        <Rectangle RadiusX="0" RadiusY="0" Canvas.Left="284.683" Canvas.Top="400.166">

            <Rectangle.Fill>
                <RadialGradientBrush GradientOrigin="0.154,0.608">
                    <RadialGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.8" ScaleY="0.503"/>
                            <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                            <RotateTransform Angle="-24.901" CenterX="0.5" CenterY="0.5"/>
                            <TranslateTransform X="-0.116" Y="0.109"/>
                        </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <GradientStop Color="#8F000000" Offset="0"/>
                    <GradientStop Color="#00000000" Offset="1"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <!-- Shadow of 3rd bar from left -->
        <Rectangle RadiusX="0" RadiusY="0" Height="84" Width="140.984" Canvas.Left="424.69" Canvas.Top="400.166">
            <Rectangle.Fill>
                <RadialGradientBrush GradientOrigin="0.154,0.608">
                    <RadialGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.8" ScaleY="0.503"/>
                            <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                            <RotateTransform Angle="-24.901" CenterX="0.5" CenterY="0.5"/>
                            <TranslateTransform X="-0.116" Y="0.109"/>
                        </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <GradientStop Color="#8F000000" Offset="0"/>
                    <GradientStop Color="#00000000" Offset="1"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <!-- Shadow of 1st bar from left -->
        <Rectangle RadiusX="0" RadiusY="0" Height="84" Width="249" Canvas.Left="134.007" Canvas.Top="400.166">
            <Rectangle.Fill>
                <RadialGradientBrush GradientOrigin="0.154,0.608">
                    <RadialGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.8" ScaleY="0.503"/>
                            <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                            <RotateTransform Angle="-24.901" CenterX="0.5" CenterY="0.5"/>
                            <TranslateTransform X="-0.116" Y="0.109"/>
                        </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <GradientStop Color="#8F000000" Offset="0"/>
                    <GradientStop Color="#00000000" Offset="1"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <!-- X axis of chart -->
        <Path Width="436.01" Height="1" Stretch="Fill" StrokeThickness="1" Canvas.Left="108.472" Canvas.Top="450.999" Data="M88.972,453.499 L523.98234,453.499">
            <Path.Stroke>
                <LinearGradientBrush EndPoint="0.895,2.5" StartPoint="0.978,1.525">
                    <GradientStop Color="#00000000" Offset="0"/>
                    <GradientStop Color="#FF000000" Offset="1"/>
                </LinearGradientBrush>
            </Path.Stroke>
        </Path>

        <!-- Y axis of chart -->
        <Path Width="285.01" Height="1" Stretch="Fill" StrokeThickness="1" Canvas.Left="-33.028" Canvas.Top="307.999" Data="M88.972,453.499 L523.98234,453.499" RenderTransformOrigin="0.5,0.5">
            <Path.Stroke>
                <LinearGradientBrush EndPoint="0.895,2.5" StartPoint="0.978,1.525">
                    <GradientStop Color="#00000000" Offset="0"/>
                    <GradientStop Color="#FF000000" Offset="1"/>
                </LinearGradientBrush>
            </Path.Stroke>
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="-90"/>
                    <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>

        <!-- 1st cylinder from left -->

        <Rectangle Width="100" Height="224.5" StrokeThickness="1" RadiusX="50" RadiusY="25" Canvas.Left="135" Canvas.Top="249">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF146581" Offset="0.827"/>
                    <GradientStop Color="#FF8CB4C1" Offset="0.091"/>
                    <GradientStop Color="#FF6EA0B1" Offset="1"/>
                    <GradientStop Color="#FF1D6B86" Offset="0.567"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Ellipse Width="100" Height="50" StrokeThickness="1" Canvas.Left="135" Canvas.Top="249">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="2.606,-3.139" StartPoint="-0.075,0.967">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF146581" Offset="0.827"/>
                    <GradientStop Color="#FF8CB4C1" Offset="0.091"/>
                    <GradientStop Color="#FF6EA0B1" Offset="1"/>
                    <GradientStop Color="#FF1D6B86" Offset="0.567"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

        <Ellipse Width="100" Height="50" StrokeThickness="1" Canvas.Left="135" Canvas.Top="249">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="1.878,-1.502" StartPoint="-0.28,1.786" SpreadMethod="Repeat">
                    <GradientStop Color="#78FFFFFF" Offset="0.581"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.622"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.4"/>
                    <GradientStop Color="#3EFFFFFF" Offset="0.444"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.736"/>
                    <GradientStop Color="#61FFFFFF" Offset="0.708"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.935"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.935"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.881"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.293"/>
                    <GradientStop Color="#32FFFFFF" Offset="0.315"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.369"/>
                    <GradientStop Color="#58FEFEFE" Offset="0.012"/>
                    <GradientStop Color="#59FEFEFE" Offset="0.979"/>
                    <GradientStop Color="#18FFFFFF" Offset="0.057"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.688"/>
                    <GradientStop Color="#18FFFFFF" Offset="0.475"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Stroke>
                <LinearGradientBrush EndPoint="-0.067,1.242" StartPoint="0.908,0.108">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Stroke>
        </Ellipse>

        <Ellipse x:Name="PaymentCylinderBase" Width="100" Height="50" StrokeThickness="1" Canvas.Left="135" Canvas.Top="248.5">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF498686" Offset="0.63"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.053"/>
                    <GradientStop Color="#FF93AFAF" Offset="1"/>
                    <GradientStop Color="#FF386868" Offset="0.88"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

        <Rectangle x:Name="PaymentCylinderBarrel" Width="100" Height="26.833" StrokeThickness="1" Canvas.Left="135" Canvas.Top="265.986">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF498686" Offset="0.63"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.053"/>
                    <GradientStop Color="#FF93AFAF" Offset="1"/>
                    <GradientStop Color="#FF386868" Offset="0.88"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Ellipse x:Name="PaymentCylinderTop" Width="100" Height="50" StrokeThickness="1" Canvas.Left="135" Canvas.Top="240.986">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="2.575,-3.073" StartPoint="0.138,1.404">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF498686" Offset="0.389"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.053"/>
                    <GradientStop Color="#FF93AFAF" Offset="1"/>
                    <GradientStop Color="#FF386868" Offset="0.88"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

        <Ellipse x:Name="PaymentCylinderTopReflect" Width="100" Height="50" StrokeThickness="1" Canvas.Left="135" Canvas.Top="220.986">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="1.878,-1.502" StartPoint="-0.28,1.786" SpreadMethod="Repeat">
                    <GradientStop Color="#78FFFFFF" Offset="0.581"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.622"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.4"/>
                    <GradientStop Color="#3EFFFFFF" Offset="0.444"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.736"/>
                    <GradientStop Color="#61FFFFFF" Offset="0.708"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.935"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.935"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.881"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.293"/>
                    <GradientStop Color="#32FFFFFF" Offset="0.315"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.369"/>
                    <GradientStop Color="#58FEFEFE" Offset="0.012"/>
                    <GradientStop Color="#59FEFEFE" Offset="0.979"/>
                    <GradientStop Color="#18FFFFFF" Offset="0.057"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.688"/>
                    <GradientStop Color="#18FFFFFF" Offset="0.475"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Stroke>
                <LinearGradientBrush EndPoint="-0.067,1.242" StartPoint="0.908,0.108">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Stroke>
        </Ellipse>
        <!-- End 1st cylinder from left -->

        <!-- 2nd cylinder from left -->
        <Ellipse x:Name="InterestCylinderBase" Width="100" Height="50" StrokeThickness="1" Canvas.Left="281.674" Canvas.Top="424.5">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF498686" Offset="0.63"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.053"/>
                    <GradientStop Color="#FF93AFAF" Offset="1"/>
                    <GradientStop Color="#FF386868" Offset="0.88"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

        <Rectangle x:Name="InterestCylinderBarrel" Width="100" Height="96.833" StrokeThickness="1" Canvas.Left="281.674" Canvas.Top="352.667">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF498686" Offset="0.63"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.053"/>
                    <GradientStop Color="#FF93AFAF" Offset="1"/>
                    <GradientStop Color="#FF386868" Offset="0.88"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Ellipse x:Name="InterestCylinderTop" Width="100" Height="50" StrokeThickness="1" Canvas.Left="281.674" Canvas.Top="327.667">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="2.575,-3.073" StartPoint="0.138,1.404">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF498686" Offset="0.389"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.053"/>
                    <GradientStop Color="#FF93AFAF" Offset="1"/>
                    <GradientStop Color="#FF386868" Offset="0.88"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

        <Ellipse x:Name="InterestCylinderTopReflect" Width="100" Height="50" StrokeThickness="1" Canvas.Left="281.674" Canvas.Top="327.667">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="1.878,-1.502" StartPoint="-0.28,1.786" SpreadMethod="Repeat">
                    <GradientStop Color="#78FFFFFF" Offset="0.581"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.622"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.4"/>
                    <GradientStop Color="#3EFFFFFF" Offset="0.444"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.736"/>
                    <GradientStop Color="#61FFFFFF" Offset="0.708"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.935"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.935"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.881"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.293"/>
                    <GradientStop Color="#32FFFFFF" Offset="0.315"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.369"/>
                    <GradientStop Color="#58FEFEFE" Offset="0.012"/>
                    <GradientStop Color="#59FEFEFE" Offset="0.979"/>
                    <GradientStop Color="#18FFFFFF" Offset="0.057"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.688"/>
                    <GradientStop Color="#18FFFFFF" Offset="0.475"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Stroke>
                <LinearGradientBrush EndPoint="-0.067,1.242" StartPoint="0.908,0.108">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Stroke>
        </Ellipse>
        <!-- End 2nd cylinder from left -->

        <!-- 3rd cylinder from left -->

        <Ellipse x:Name="TaxCylinderBase" Width="100" Height="50" StrokeThickness="1" Canvas.Left="421.681" Canvas.Top="424.5">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF498686" Offset="0.63"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.053"/>
                    <GradientStop Color="#FF93AFAF" Offset="1"/>
                    <GradientStop Color="#FF386868" Offset="0.88"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

        <Rectangle x:Name="TaxCylinderBarrel" Width="100" Height="6.833" StrokeThickness="1" Canvas.Left="421.681" Canvas.Top="442.667">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF498686" Offset="0.63"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.053"/>
                    <GradientStop Color="#FF93AFAF" Offset="1"/>
                    <GradientStop Color="#FF386868" Offset="0.88"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Ellipse x:Name="TaxCylinderTop" Width="100" Height="50" StrokeThickness="1" Canvas.Left="421.681" Canvas.Top="417.667">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="2.575,-3.073" StartPoint="0.138,1.404">
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF498686" Offset="0.389"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.053"/>
                    <GradientStop Color="#FF93AFAF" Offset="1"/>
                    <GradientStop Color="#FF386868" Offset="0.88"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

        <Ellipse x:Name="TaxCylinderTopReflect" Width="100" Height="50" StrokeThickness="1" Canvas.Left="421.681" Canvas.Top="417.667">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="1.878,-1.502" StartPoint="-0.28,1.786" SpreadMethod="Repeat">
                    <GradientStop Color="#78FFFFFF" Offset="0.581"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.622"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.4"/>
                    <GradientStop Color="#3EFFFFFF" Offset="0.444"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.736"/>
                    <GradientStop Color="#61FFFFFF" Offset="0.708"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.935"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.935"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.881"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.293"/>
                    <GradientStop Color="#32FFFFFF" Offset="0.315"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.369"/>
                    <GradientStop Color="#58FEFEFE" Offset="0.012"/>
                    <GradientStop Color="#59FEFEFE" Offset="0.979"/>
                    <GradientStop Color="#18FFFFFF" Offset="0.057"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.688"/>
                    <GradientStop Color="#18FFFFFF" Offset="0.475"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Stroke>
                <LinearGradientBrush EndPoint="-0.067,1.242" StartPoint="0.908,0.108">
                    <GradientStop Color="#00FFFFFF" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Stroke>
        </Ellipse>
        <!-- End 3rd cylinder from the left -->

        <!-- Cylinder $$ and %% labels -->
        <TextBlock x:Name="InterestLabel" Width="112.202" Height="21.668" Canvas.Left="306.472" Canvas.Top="301.999" FontFamily="Trebuchet MS" FontSize="18" FontWeight="Bold" Foreground="#FF1D62AF" TextWrapping="Wrap">
    <Run Text="xx%"/>
  </TextBlock>
        <TextBlock x:Name="TaxLabel" Width="112.202" Height="21.668" Canvas.Left="433.472" Canvas.Top="369.999" FontFamily="Trebuchet MS" FontSize="18" FontWeight="Bold" Foreground="#FF1D62AF" TextWrapping="Wrap">
    <Run Text="^^^"/>
  </TextBlock>
        <TextBlock x:Name="PaymentLabel" Width="112.202" Height="21.668" Canvas.Left="145.472" Canvas.Top="195" FontFamily="Trebuchet MS" FontSize="18" FontWeight="Bold" Foreground="#FF1D62AF" TextWrapping="Wrap">
    <Run Text="^^^"/>
  </TextBlock>
        <!-- End cylinder $$ and %% labels -->

        <!-- Cylinder labels -->
        <TextBlock Width="126.528" Height="27" Canvas.Left="122.472" Canvas.Top="485.499" FontFamily="Trebuchet MS" FontWeight="Bold" Foreground="#FF072F2F" TextWrapping="Wrap">
    <Run Text="Monthly Payment"/>
  </TextBlock>
        <TextBlock Width="126.528" Height="27" Canvas.Left="288.472" Canvas.Top="485.499" FontFamily="Trebuchet MS" FontWeight="Bold" Foreground="#FF072F2F" TextWrapping="Wrap" Text="Interest Rate*"/>
  <TextBlock Width="100.528" Height="35" Canvas.Left="432.472" Canvas.Top="477.499" FontFamily="Trebuchet MS" FontWeight="Bold" Foreground="#FF072F2F" TextWrapping="Wrap" Text="    Annual&#xd;&#xa;Tax Benefit"/>
  <!-- End cylinder labels -->

  <TextBlock Width="153.674" Height="15.5" FontFamily="Trebuchet MS" FontSize="9" TextWrapping="Wrap" Canvas.Left="261" Canvas.Top="518">
    <Run Text="*Interest rates apply only to HELOC."/>
  </TextBlock>
  
</Canvas>
</UserControl>